<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>

    
</head>
<body>

    <div id="divId">
        <div v-for="user in userList">
            {{user.name}} -- {{user.age}} <br/>
        </div>
    </div>
    
    <script>
        new Vue({
            el: '#divId',
            data: {
                userList: [
                ]
            },
            created() { // 在页面渲染之前先执行
                //调用方法，得到json数据
                this.getList();
            },
            methods:{
                getList() {
                    // 使用axios方式进行ajax请求
                    axios.get("user.json")
                    .then(
                        response => {
                            this.userList = response.data.users.items;
                            console.log(this.userList);
                            console.log(response.data.code);
                        }
                    )    // 请求成功
                    .catch(
                        response => {
                            console.log(response);
                        }
                    )   // 请求失败
                }
            }
        })
    </script>

    
</body>
</html>